<template>
  <div id="app">
    <!--    <img src="./assets/logo.png">  v-if="isRouterAlive"-->
    <!--    <transition>-->
    <transition>
      <keep-alive>
        <loading v-if="isShowLoading"></loading>
        <no-network v-else-if="responseErrorStatus"></no-network>
        <router-view v-else/>
      </keep-alive>
    </transition>

<!--    <portal-target name="destination" multiple>-->
<!--      hello i am destination1-->
<!--    </portal-target>-->
<!--    <portal-target name="destination1" multiple>-->
<!--      hello i am destination2-->
<!--    </portal-target>-->
<!--    <portal-target name="destination2" slim>-->
<!--    </portal-target>-->
<!--    <portal-target-->
<!--      name="destination3"-->
<!--      :slot-props="test"-->
<!--    />-->
<!--    <portal-target-->
<!--      name="destination4"-->
<!--      :slotScope="{ message: 'Hi!' }"-->
<!--    >-->
<!--      <p slot-scope="props">-->
<!--        {{props.message}} This is rendered when no other content is available.-->
<!--      </p>-->
<!--    </portal-target>-->
<!--    <portal-target-->
<!--      name="destination5"-->
<!--      :slot-props="{state: 'disabled!'}"-->
<!--    >-->
<!--    </portal-target>-->
<!--    <MountingPortal mountTo="#widget" name="source" append>-->
<!--      <p>Content for the Target</p>-->
<!--    </MountingPortal>-->
    <!--    :slot-props="test" 1对象，2必须使用slot-props3，父组件可以使用v-slot+template-->
    <!--    <router-view class="view one" name="main"></router-view>-->
    <!--    <router-view class="view two" name="TestA"></router-view>-->
    <!--    <router-view class="view three" name="TestB"></router-view>-->
    <!--    <router-view class="view four" name="TestC"></router-view>-->
    <!--    </transition>-->
  </div>
</template>

<script>
  import request from './api/request'
  import Loading from './components/Loading'
  import {showLoadingInterceptor} from './util/request'
  import {mapState, mapMutations} from 'vuex'
  import NoNetwork from './components/NoNetwork'
  import {cookieSetting} from './util/help'

  export default {
    name: 'App',
    // provide () {
    //   return {
    //     reload: this.reload
    //   }
    // },
    // created() {
    //   // this.monitorRequest()
    //   // showLoadingInterceptor(request,this.loadingStart,this.loadingEnd)
    // },
    components: {
      NoNetwork,
      Loading
    },
    beforeRouteUpdate(to, from, next) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      next()
    },
    computed: {
      ...mapState({
          isShowLoading: state => state.request.isShowLoading,
          responseErrorStatus: state => state.request.responseErrorStatus,
        }
      )
    },
    // mounted: function () {
    //   // console.log(this.$route.params)
    // },
    data() {
      return {
        // isRouterAlive: true,
        // isShowLoading: false,
        // requestCount: 0,
        message: 'Vue的生命周期',
        transitionName: 'slide-left',
        test: {
          msg: 'Hello from the Target to You!',
          num: 10
        }
      }
    },
    created: function () {
      // console.log('mounted')
      // this.countRequest()
      cookieSetting()
      // showLoadingInterceptor(request, this.countRequest, this.countResponse, this.responseError)
    },
    methods: {
      ...mapMutations([
        'countRequest',
        'countResponse',
        'responseError'
      ]),
      // monitorRequest() {
      //   this.isShowLoading = true
      //   this.getRequest()
      //   this.getResponse()
      // },
      // getRequest() {
      //   request.interceptors.request.use(this.getRequestResolve(), function (error) {
      //     return Promise.reject(error);
      //   });
      // },
      // getResponse() {
      //   request.interceptors.response.use(this.getResponseResolve(), function (error) {
      //     return Promise.reject(error);
      //   });
      // },
      // loadingStart() {
      //   console.log(this.requestCount + ' in')
      //   this.requestCount++
      //   this.isShowLoading = true
      // },
      // loadingEnd() {
      //   console.log(this.requestCount + ' out')
      //   if (this.requestCount > 0) {
      //     this.requestCount--
      //   }
      //   if (this.requestCount === 0) {
      //     this.isShowLoading = false
      //   }
      // }
      // reload() {
      //   this.isRouterAlive = false
      //   this.$nextTick(function () {
      //     this.isRouterAlive = true
      //   })
      // }
    },
    // beforeCreate: function() {
    //   console.group('------beforeCreate创建前状态------');
    //   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
    //   console.log("%c%s", "color:red","data   : " + this.$data); //undefined
    //   console.log("%c%s", "color:red","message: " + this.message)
    //   // showLoadingInterceptor(request,this.loadingStart,this.loadingEnd)
    // },
    // created: function() {
    //   console.group('------created创建完毕状态------');
    //   console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    //   console.log(window.navigator)
    //
    // },
    // beforeMount: function() {
    //   console.group('------beforeMount挂载前状态------');
    //   console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    // },
    // mounted: function() {
    //   console.group('------mounted 挂载结束状态------');
    //   console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    // },
    // beforeUpdate: function () {
    //   console.group('beforeUpdate 更新前状态===============》');
    //   console.log("%c%s", "color:red","el     : " + this.$el);
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data);
    //   console.log("%c%s", "color:red","message: " + this.message);
    // },
    // updated: function () {
    //   console.group('updated 更新完成状态===============》');
    //   console.log("%c%s", "color:red","el     : " + this.$el);
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data);
    //   console.log("%c%s", "color:red","message: " + this.message);
    // },
    // beforeDestroy: function () {
    //   console.group('beforeDestroy 销毁前状态===============》');
    //   console.log("%c%s", "color:red","el     : " + this.$el);
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data);
    //   console.log("%c%s", "color:red","message: " + this.message);
    // },
    // destroyed: function () {
    //   console.group('destroyed 销毁完成状态===============》');
    //   console.log("%c%s", "color:red","el     : " + this.$el);
    //   console.log(this.$el);
    //   console.log("%c%s", "color:red","data   : " + this.$data);
    //   console.log("%c%s", "color:red","message: " + this.message)
    // }
  }
</script>
<!--<aside id="widget" class="widget-sidebar">-->
<!--  This Element is not controlled by our Vue-App,-->
<!--  but we can create a-->
<!--  <portal-target> here with-->
<!--    <MountingPortal>.-->
<!--</aside>-->

<style>
  * body {
    padding: 0;
    margin: 0;
    background: #F5F5F5;
    /*font-family: Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;*/
    font-size: 1em;
    box-sizing: border-box;
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
  }
</style>
